<template>
  <div id="app">
      <div class="layout">
          <Layout>
              <Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed" style="height: 100vh">
                    <div style="height: 50px;padding-left:20px;">
                        <p :class="TitleClasses">
                            <i>
                                <img src="../assets/logo_white.png" />
                            </i>
                            <span>前端设备管理工具</span>
                        </p>
                    </div>
                    <Menu :active-name="active_menu_name" theme="dark" width="auto" :class="MenuItemClasses" @on-select="handleMenuSelect">
                        <MenuItem name="clients">
                            <Icon type="md-radio"></Icon>
                            <span>设备管理</span>
                        </MenuItem>
                        <MenuItem name="detection">
                            <Icon type="md-stats"></Icon>
                            <span>数值监测</span>
                        </MenuItem>
                        <MenuItem name="cmds">
                            <Icon type="md-flash"></Icon>
                            <span>命令管理</span>
                        </MenuItem>
                        <MenuItem name="tasks">
                            <Icon type="md-list-box" />
                            <span>测试任务管理</span>
                        </MenuItem>
                        <MenuItem name="lanips">
                            <Icon type="md-git-network" />
                            <span>局域网IP管理</span>
                        </MenuItem>
                        <MenuItem name="alarm_plans">
                            <Icon type="ios-stopwatch" />
                            <span>告警计划管理</span>
                        </MenuItem>
                        <MenuItem name="alarm_records">
                            <Icon type="md-notifications"></Icon>
                            <span>告警消息管理</span>
                        </MenuItem>
                        <MenuItem name="alarm_notices">
                            <Icon type="md-megaphone"></Icon>
                            <span>告警通知管理</span>
                        </MenuItem>
                        <MenuItem name="logs">
                            <Icon type="ios-paper" />
                            <span>设备日志管理</span>
                        </MenuItem>
                        <MenuItem name="system_logs">
                            <Icon type="md-paper" />
                            <span>系统日志管理</span>
                        </MenuItem>
                        <MenuItem name="configs">
                            <Icon type="md-settings"></Icon>
                            <span>系统设置</span>
                        </MenuItem>
                        <MenuItem name="install_client">
                            <Icon type="md-browsers"></Icon>
                            <span>安装客户端</span>
                        </MenuItem>
                    </Menu>
              </Sider>
              <Layout>
                  <Header style="padding: 0px;z-index: 2;" class="layout-header-bar">
                      <Icon @click="collapsedSider" :class="rotateIcon" :style="{margin: '0 20px'}" type="md-menu" size="24"></Icon>
                      <ProfileButton style="float:right;margin-right: 20px;"></ProfileButton>
                      <NewAlarmButton style="float:right;margin-right: 20px;line-height: 50px;"></NewAlarmButton>
                  </Header>
                  <Content style="padding: 20px;padding-top:60px;background: #fff;height:100vh;overflow:auto;margin-top:-40px;z-index: 1;">
                        <div v-show="active_menu_name == 'clients'">
                            <ClientsView></ClientsView>
                        </div>
                        <div v-show="active_menu_name == 'cmds'">
                            <CmdsView></CmdsView>
                        </div>
                        <div v-show="active_menu_name == 'tasks'">
                            <TasksView></TasksView>
                        </div>
                        <div v-show="active_menu_name == 'lanips'">
                            <LANIPsView></LANIPsView>
                        </div>
                        <div v-show="active_menu_name == 'alarm_plans'">
                            <AlarmPlanView></AlarmPlanView>
                        </div>
                        <div v-show="active_menu_name == 'alarm_records'">
                            <AlarmRecordsView></AlarmRecordsView>
                        </div>
                        <div v-show="active_menu_name == 'alarm_notices'">
                            <AlarmNoticesView></AlarmNoticesView>
                        </div>
                        <div v-show="active_menu_name == 'logs'">
                            <ClientLogsView></ClientLogsView>
                        </div>
                        <div v-show="active_menu_name == 'system_logs'">
                            <SystemLogsView></SystemLogsView>
                        </div>
                        <div v-show="active_menu_name == 'configs'">
                            <SettingsView></SettingsView>
                        </div>
                        <div v-show="active_menu_name == 'install_client'">
                            <InstallClientView></InstallClientView>
                        </div>
                        <div v-show="active_menu_name == 'detection'">
                            <DetectionValuesView></DetectionValuesView>
                        </div>
                  </Content>
              </Layout>
          </Layout>
      </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
import ProfileButton from '@/views/ProfileButton.vue';
import NewAlarmButton from '@/views/NewAlarmButton.vue';
import ClientsView from './ClientsView.vue';
import CmdsView from './CmdsView.vue';
import TasksView from './TasksView.vue';
import AlarmPlanView from './AlarmPlanView.vue';
import AlarmRecordsView from './AlarmRecordsView.vue';
import AlarmNoticesView from './AlarmNoticesView.vue';
import InstallClientView from './InstallClientView.vue';
import SystemLogsView from './SystemLogsView.vue';
import SettingsView from './SettingsView.vue';
import ClientLogsView from './ClientLogsView.vue';
import LANIPsView from './LANIPsView.vue';
import DetectionValuesView from './DetectionValuesView.vue';

export default {
    name: 'HomeView',
    components: {
        ProfileButton,
        NewAlarmButton,
        ClientsView,
        CmdsView,
        TasksView,
        AlarmPlanView,
        AlarmRecordsView,
        AlarmNoticesView,
        InstallClientView,
        SystemLogsView,
        SettingsView,
        ClientLogsView,
        LANIPsView,
        DetectionValuesView
    },
    data() {
        return {
            isCollapsed: false,
            active_menu_name: 'clients',
        }
    },
    computed: {
        rotateIcon () {
            return [
                'menu-icon',
                this.isCollapsed ? 'rotate-icon' : ''
            ];
        },
        TitleClasses () {
            return [
                'menu-item',
                'home-title',
                this.isCollapsed ? 'collapsed-menu' : ''
            ]
        },
        MenuItemClasses () {
            return [
                'menu-item',
                this.isCollapsed ? 'collapsed-menu' : ''
            ]
        }
    },
    methods: {
        ...mapMutations(['setClientsBriefData', 'setAppsBriefData', 'setConfigs']),
        collapsedSider () {
            this.$refs.side1.toggleCollapse();
        },
        handleMenuSelect(name) {
            console.log(name);
            this.active_menu_name = name;
        },
        handleGetClientsBrief() {
            this.$http.get('/get_clients_brief').then(res => {
                let data = res.data;
                let result = {};
                data.forEach(item => {
                    result[item.client_id] = item.client_name;
                });
                this.setClientsBriefData(result);
            });
        },
        handleGetAppsBrief() {
            this.$http.get('/get_apps').then(res => {
                let data = res.data;
                let apps_brief_data = {}
                data.forEach(item => {
                    item.app_enable = item.app_enable == 1;
                    apps_brief_data[item.app_id] = item.app_name;
                });
                this.setAppsBriefData(apps_brief_data);
            });
        },
        handleGetConfigs() {
            this.$http.get('/get_configs').then(res => {
                let data = res.data;
                let configs = {};
                data.forEach(item => {
                    configs[item.config_name] = item.config_value;
                });
                configs['email_enable'] = configs['email_enable'] == '1';
                configs['relay_service_enable'] = configs['relay_service_enable'] == '1';
                configs['notice_force_relay'] = configs['notice_force_relay'] == '1';
                configs['relay_register_enable'] = configs['relay_register_enable'] == '1';
                configs['cmd_iperf3_server_enable'] = configs['cmd_iperf3_server_enable'] == '1';
                this.setConfigs(configs);
            });
        },
        handleRefreshToken() {
            this.$http.post('/refresh_token').then(res => {
                localStorage.setItem('token', res.data);
            });
        }
    },
    mounted() {
        this.handleGetClientsBrief();
        this.handleGetAppsBrief();
        this.handleGetConfigs();

        let temp = setInterval(() => {
            let token = localStorage.getItem('token');
            if (token == null) {
                clearInterval(temp);
                return;
            }
            this.handleRefreshToken(); // 定期刷新令牌，防止过期
        }, 60 * 60 * 1000)
        this.handleRefreshToken();
    }
}
</script>

<style scoped>     
  .layout{
      border: 1px solid #d7dde4;
      background: #f5f7f9;
      position: relative;
      border-radius: 4px;
      overflow: hidden;
      height: 100vh;
  }
  .layout .ivu-menu{
      z-index: 0
  }
  .layout-header-bar{
      background: #fff;
      box-shadow: 0 1px 1px rgba(0,0,0,.1);
      height: 50px;
      line-height: 50px;
  }
  .layout-logo-left{
      width: 90%;
      height: 30px;
      background: #5b6270;
      border-radius: 3px;
      margin: 15px auto;
  }
  .menu-icon{
      transition: all .3s;
  }
  .rotate-icon{
      transform: rotate(-90deg);
  }
  .menu-item span{
      display: inline-block;
      overflow: hidden;
      width: 130px;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: bottom;
      transition: width .2s ease .2s;
  }
  .menu-item i{
      transform: translateX(0px);
      transition: font-size .2s ease, transform .2s ease;
      vertical-align: middle;
      font-size: 16px;
  }
  .home-title {
    color:#fff;
    font-size: 16px;
    line-height: 50px;
  }
  .home-title img {
    vertical-align: text-bottom;
    width: 18px;
    margin-right: 5px;
  }
  .collapsed-menu span{
      width: 0px;
      transition: width .2s ease;
  }
  .collapsed-menu i{
      transform: translateX(5px);
      transition: font-size .2s ease .2s, transform .2s ease .2s;
      vertical-align: middle;
      font-size: 22px;
  }

  .collapsed-menu img{
      transform: translateX(5px);
      transition: width .2s ease .2s, transform .2s ease .2s;
      vertical-align: text-bottom;
      width: 30px;
  }
</style>
